import React from 'react';
import classNames from 'classnames';

class Cell extends React.Component {
    displayName = 'Cell';

    renderHours () {
        const {current, type, disabledTime, time} = this.props;
        const hours = [];
        let num = 24;
        if (type === 'hour') {
            num = 24;
        }
        if (type === 'minute') {
            num = 60;
        }
        if (type === 'second') {
            num = 60;
        }
        for (let i = 0; i < num; i++) {
            hours.push(i);
        }
        return hours.map((hour, index) => {
            const active = hour === current;
            const disabled = disabledTime && disabledTime(time, hour, type);
            const clazzName = classNames('cm-time-picker-item', {
                'cm-time-picker-item-active': active,
                'cm-time-picker-item-disabled': disabled
            });
            return <li key={index} className={clazzName} onClick={this.onSelectNum.bind(this, hour, disabled)}>{hour}</li>;
        });
    }

    onSelectNum = (num, disabled) => {
        if (!disabled) {
            this.props.onChange && this.props.onChange(num);
        }
    }

    componentDidMount () {
        this.scrollTop();
    }

    componentDidUpdate () {
        this.scrollTop();
    }

    scrollTop () {
        const {current} = this.props;
        const scrollTop = current * 24;
        this.wrap.scrollTop = scrollTop;
    }

    render () {
        return <div className='cm-time-pciker-hours cm-time-picker-cell' ref={f => this.wrap = f} style={{display: this.props.display ? 'block' : 'none'}}>
            <ul>
                {this.renderHours()}
            </ul>
        </div>;
    }
}

export default Cell;
